<template>
  <div class="city">
    <swiper v-if="addressList.length > 0" :options="swiperOption1" ref="mySwiper" style="margin: 8% auto">
      <swiper-slide v-for="item in addressList" :key="item.id">
        <img  @click.stop="toAddress(item)" :src="item.thumbUrlWechat" alt="" style="width: 300px; height: 520px">
      </swiper-slide>
    </swiper>
  </div>
</template>

<script type='text/ecmascript-6'>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import swiperImg from '@/assets/img/testImg/653h.jpg'
import swiperImg1 from '@/assets/img/testImg/details01.jpg'
// import { isIphoneX } from '@/assets/js/brower'
import axios from '@/api/axiosApi'
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      swiperImg,
      swiperImg1,
      swiperOption1: {
        notNextTick: true,
        initialSlide: 0,
        effect: 'coverflow',
        grabCursor: true,
        setWrapperSize: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        paginationClickable: true,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        centeredSlides: true,
        slidesPerView: 1.3,
        spaceBetween: 20,
        height: 340,
        loop: true,
        loopAdditionalSlides: 1,
        loopFillGroupWithBlank: false,
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false
        }
      },
      addressList: []
    }
  },
  created () {
    this.getAddressList()
    // let slidesPerView = 1.3
    // if (isIphoneX()) {
    //   this.swiperOption.slidesPerView = 1.25
    //   this.swiperOption.spaceBetween = 30
    // } else {
    //   this.swiperOption.slidesPerView = 1.3
    //   this.swiperOption.spaceBetween = 20
    // }
  // 路由跳转前进行title设置
    // router.beforeEach((to, from, next) => {
    //   setDocumentTitle(to.meta.pageTitle)
    //   next()
    // })
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  methods: {
    getAddressList () {
      axios.get(this, '/v1/address/1', {
        page: 50
      }, (data) => {
        this.addressList = data
      })
    },
    toAddress (item) {
      this.$router.push('/address')
      this.setCurrentArea(item)
    },
    ...mapMutations({
      setCurrentArea: 'SET_CURRENT_AREA'
    })
  }
}
</script>


<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/css/variable.styl'

.city {
  position fixed 
  top 0
  left 0
  right 0
  bottom 0px
  z-index 210
  background $color-background
}
</style>
